<template>
    <div>
        <editor :init="init" v-model="content" :tinymce-script-src="tinymceScriptSrc" @onInit="onReady" />
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default {
    components: {
        Editor
    },
    props: {
        modelValue: {
            type: String,
            default: "",
        },
    },
    name: 'CkEditor',
    data() {
        return {
            content: this.modelValue,
            tinymceScriptSrc: '/static/tinymce/tinymce.min.js', //本地的tinymce文件地址
            init: {
                height: 300,
                resize: false, // 调整编辑器大小工具 true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）
                statusbar: true, // 显示隐藏状态栏 状态栏指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一条。默认是显示的，设为false可将其隐藏。
                branding: false, // 隐藏右下角技术支持
                toolbar: 'code paste help fullscreen image undo redo',
                elementpath: false, //禁用编辑器底部的状态栏
                statusbar: false, // 隐藏编辑器底部的状态栏
                paste_data_images: true, // 允许粘贴图像
                language: 'zh_CN',
                language_url: '/static/tinymce/langs/zh_CN.js',
                theme: 'silver',
                theme_url: '/static/tinymce/themes/silver/theme.min.js',
                base_url: '/static/tinymce',
                suffix: '.min',
                plugins: 'image paste code',
            }
        }
    },
    methods: {
        onReady(e) {
            //  获取tinymce对象 可以使用此对象调用 各种api。具体看tinymce官网
            this.editor = e.target
        }
    },
    watch: {
        // value(val) {
        //     this.content = val
        // },
        modelValue(val) {
            this.content = val
            console.log(val)
        },
        content(newValue) {
            // this.$emit("input", newValue)
            this.$emit("update:modelValue", newValue)
        }
    }
}
</script>